<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8">
		<title>Arknight抽卡统计 - By 轩川浮华</title>
		<script src="js/jquery-3.6.0.min.js"></script>
		<script src="js/echarts.min.js"></script>
		<script src="js/jquery-ui.min.js"></script>
		<link rel="icon" href="favicon.png">
		<link rel="stylesheet" href="css/main.css">
	</head>
	<body>
		<div id="global-cover">
			<div id="global-cover2"></div>
			<div id="global-cover1"></div>
		</div>
		<div id="loading">
			<audio id="voice-title" src="resource/amiya_title.wav" preload="auto"></audio>
			<div id="loading-front"></div>
			<div id="loading-line">
				<div id="loading-line-left">
					<div></div>
				</div>
				<div id="loading-line-right">
					<div></div>
				</div>
				<div id="loading-start-cover">
					<div id="loading-start-bg2">
						<div></div>
					</div>
					<div id="loading-start-bg">
						<div id="loading-start">
							<p>▶<br>start</p>
						</div>
					</div>
				</div>
				<a style="position: absolute;right: 1rem;bottom: 1rem;color: white;" href="https://beian.miit.gov.cn/">浙ICP备2022010842号</a>
			</div>
		</div>
		<div id="loading-data">
			<div id="loading-data-cover-bg"></div>
			<div id="loading-data-cover">
				<div id="loading-data-bg2">
					<div></div>
				</div>
				<div id="loading-data-bg">
					<div></div>
				</div>
			</div>
		</div>
		<div id="error">
			<div id="error-bgTop">
				<img src="img/PRTS.png" alt="PRTS.png">
			</div>
			<div id="error-bgBottom">
				<div id="error-bg">
					<div id="error-msg">
						<button onclick="toggle_error('close')">确认</button>
						<span>NULL</span>
					</div>
				</div>
			</div>
		</div>
		<audio id="voice-hello" src="resource/amiya_hello.wav" preload="auto"></audio>
		<div id="float-HUD">
			<p></p>
		</div>
		<div id="float-item">
			<div id="float-voice">
				<img src="img/voice-on.png" status="on" alt="语音开关" title="切换欢迎语开关">
			</div>
			<div id="float-tips">
				<img src="img/tips.png" alt="提示" title="切换提示开关">
			</div>
			<div id="float-gachaExplain">
				<img src="img/gachaExplain.png" alt="抽卡数据解释" title="查看抽卡数据解释">
			</div>
			<div id="float-forceUpdateGacha">
				<img src="img/forceUpdateGacha.png" alt="强制覆盖更新最新数据" title="强制覆盖更新最新数据">
			</div>
			<div id="float-download">
				<img src="img/download.png" alt="下载抽卡数据" title="点击下载你的抽卡数据(JSON格式)">
			</div>
			<div id="float-share">
				<img src="img/share.png" alt="分享抽卡数据" title="点击分享你的抽卡数据(需要当前输入的token有效)">
			</div>
			<div id="float-youpaiyunLogo">
				<img src="img/又拍云_logo7.png" alt="又拍云_logo7" title="本站由又拍云提供CDN加速服务">
			</div>
		</div>
		<div id="bg"></div>
		<div id="login" class="box-shadow">
			<button onclick="login()">登录</button>
		</div>
		<div id="get_token" class="drop-shadow">
			<div>
				<div id="get_token_title">
					<span>请输入您的方舟token</span>
				</div>
				<div id="get_token_input">
					<div>
						<p>输入token:</p>
						<div id="get_token_input-group">
							<span></span>
							<input id="token" type="text" name="token" placeholder="请粘贴到这里">
							<label for="token"></label>
						</div>
						<span id="token-tips" onclick="toggle_info('#token-tipsBox','show')"> # 不知道token是什么？怎么获取？</span>
						<div id="token_submit-group">
							<button type="submit" disabled="disabled"
								onclick="outputGacha($('#get_token_input-group>input').val())">提交</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="select_channel" class="drop-shadow">
			<div>
				<div id="select_channel_title">
					<span>请选择服务器</span>
				</div>
				<div id="select_channel_input">
					<div id="select_channel_channel_box">
						<input type="radio" name="channel" value="官服" id="official" checked>
						<label for="official">
							<div class="channel_box">
								<img src="/img/hypergryph.png" alt="官服logo">
							</div>
							<span>官服</span>
						</label>
						<input type="radio" name="channel" value="bilibili服" id="bilibili">
						<label for="bilibili">
							<div class="channel_box">
								<img src="/img/bilibili.png" alt="B服logo">
							</div>
							<span>BiliBili服</span>
						</label>
					</div>
					<div id="select_channel_submit">
						<label for="remember_channel" title="记住后，后续将默认获取该服务器">
							<input type="checkbox" id="remember_channel">
							点击记住选择
						</label>
						<button class="ark_button">确认</button>
					</div>
				</div>
			</div>
		</div>
		<div id="token-tipsBox" class="drop-shadow">
			<div>
				<div id="token-tipsTitle">
					<span>如何获取token</span>
					<span onclick="toggle_info('#token-tipsBox','close')">&#10006</span>
				</div>
				<div id="token-tipsText">
					<p>1、去<a href="https://ak.hypergryph.com/" target="_blank">明日方舟官网</a>登入明日方舟，然后关闭明日方舟官网的页面回到这里</p>
					<p>2、点<a href="https://web-api.hypergryph.com/account/info/hg"
							target="_blank">这个</a>复制所有内容 例：<img onclick="imgZoom($(this),'show')" class="img"
							src="img/tokenTips-1.png" alt="tokenTips-1.png"></p>
					<p># 如果点击<a href="https://as.hypergryph.com/user/info/v1/token_by_cookie"
							target="_blank">这个</a>按钮后浏览器弹出下载的选项，请使用其他浏览器访问，例如
						<a href="https://www.microsoft.com/zh-cn/edge" target="_blank">Microsoft Edge</a>
						<img onclick="imgZoom($(this),'show')" src="img/MicrosoftEdge-Logo.png" class="img"
							alt="MicrosoftEdge-Logo.png">
						、
						<a href="https://www.google.cn/chrome/index.html" target="_blank">Google Chrome</a>
						<img onclick="imgZoom($(this),'show')" src="img/GoogleChrome-Logo.svg" class="img"
							alt="GoogleChrome-Logo.svg">
					</p>
					<p>3、将复制出来的内容粘贴到输入框提交即可</p>
					<p># 本网站并不会收集你的token，仅用于查询抽卡数据，如果您仍旧觉得有安全隐患，可以去<a href="https://ak.hypergryph.com/user/home"
							target="_blank">个人中心</a>点击“清除其他设备的登入状态”
						<img onclick="imgZoom($(this),'show')" class="img" src="img/tokenTips-2.png"
							alt="tokenTips-2.png">
						然后点右上角的登出按钮
						<img onclick="imgZoom($(this),'show')" class="img" src="img/tokenTips-3.png"
							alt="tokenTips-3.png">
						与您的账户有关的所有token都将失效，且明日方舟网页与明日方舟手游也需要重新登录
					</p>
				</div>
			</div>
		</div>
		<div id="info_box" class="drop-shadow">
			<div>
				<div id="info_title">
					<span>
						<img src="img/hypergryph.ico" alt="hypergryph.ico">
						明日方舟 - 抽卡统计
					</span>
					<span
						onclick="toggle_info('#info_box','close',function(){toggle_info('#get_token','show')})">&#10006</span>
				</div>
				<div id="info">
					<div id="info_left">
						<div id="poolBox">
							<span id="pool" class="pool">NULL</span>
							<div id="poolList"></div>
						</div>
						<div id="chart"></div>
					</div>
					<div id="info_right">
						<h2 id="nickname">NULL</h2>
						<p id="time">NULL - NULL</p>
						<table>
							<tr id="r3tr">
								<td><span id="r3">三星：</span></td>
								<td><span id="r3num">NULL</span></td>
								<td><span id="r3percent">NULL</span></td>
							</tr>
							<tr id="r4tr">
								<td><span id="r4">四星：</span></td>
								<td><span id="r4num">NULL</span></td>
								<td><span id="r4percent">NULL</span></td>
							</tr>
							<tr id="r5tr">
								<td><span id="r5">五星：</span></td>
								<td><span id="r5num">NULL</span></td>
								<td><span id="r5percent">NULL</span></td>
							</tr>
							<tr id="r6tr">
								<td><span id="r6">六星：</span></td>
								<td><span id="r6num">NULL</span></td>
								<td><span id="r6percent">NULL</span></td>
							</tr>
						</table>
						<h3>
							自本站统计以来，在
							<span class="pool">NULL</span>
							中一共抽了
							<span id="gachaNum">NULL</span>
							发，已经
							<span id="gachaLastR6Num">NULL</span>
							发没有出六星了
						</h3>
						<div>
							<span class="show_history" onclick="$('#r6box').slideToggle('fast')">显示/隐藏六星记录</span>
						</div>
						<div id="r6box">
							<h3>六星平均出货次数：
								<span id="avg_r6">NULL</span>
							</h3>
							<span id="r6List">NULL</span>
						</div>
						<div>
							<span class="show_history" onclick="$('#r5box').slideToggle('fast')">显示/隐藏五星记录</span>
						</div>
						<div id="r5box">
							<h3>五星平均出货次数：
								<span id="avg_r5">NULL</span>
							</h3>
							<span id="r5List">NULL</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="imgZoom">
			<img src="img/bg.jpg" alt="占位" onclick="imgZoom($(this),'close')">
		</div>
		<footer>
			<p>Source Code By 轩川浮华 Version 0.60-2025感谢庆典SideStory「雪山降临1101」与卡池「以风雪为誓」活动更新-(2025.11.3) Beta版本 | 图表绘制库 By <a href="https://echarts.apache.org/zh/index.html" target="_blank">Apacha Echarts</a> | 本页面是测试版本，仅供参考 |<a href="https://gitee.com/xcfuhua/ArknightsGachaWebsite" target="_blank">Gitee仓库</a>&emsp;&emsp;本网站由 <a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="_blank"><img class="youpaiyunLogo" src="img/又拍云_logo2.png" alt="又拍云_logo2" title="点击跳转又拍云"></a> 提供CDN加速服务 <a href="https://beian.miit.gov.cn/">浙ICP备2022010842号</a></p>
		</footer>
		<script src="js/main.js"></script>
	</body>
</html>
